<template>
  <div class="tools-container">
    <el-card>
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-bold">工具管理</h2>
        <el-button type="primary" @click="openDialog">新增工具</el-button>
      </div>

      <el-table :data="tools" style="width: 100%">
        <el-table-column prop="name" label="工具名称"/>
        <el-table-column prop="description" label="描述"/>
        <el-table-column prop="apiEndpoint" label="接口地址"/>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="openDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteTool(scope.row.id)">删除</el-button>
            <el-button size="small" @click="toggleStatus(scope.row)">
              {{ scope.row.status === 1 ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑工具弹窗 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="form.description"/>
        </el-form-item>
        <el-form-item label="接口地址">
          <el-input v-model="form.apiEndpoint"/>
        </el-form-item>

        <el-form-item label="参数模板">
          <el-input
            type="textarea"
            v-model="form.paramTemplate"
            placeholder='例如 {"city":"string","date":"string"}'
            :rows="4"
          />
        </el-form-item>
        <el-form-item label="示例输入">
          <el-input type="textarea" v-model="form.exampleInput" />
        </el-form-item>
        <el-form-item label="示例输出">
          <el-input type="textarea" v-model="form.exampleOutput" />
        </el-form-item>


        <el-form-item label="状态">
          <el-switch v-model="form.status" active-value="1" inactive-value="0"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="saveTool()">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const tools = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref('新增工具');
const form = ref({
  id: null,
  name: '',
  api_endpoint: '',
  description: '',
  status: 1,
  param_template: '{}',
  example_input: '',
  example_output: ''
})
// 获取工具列表
const fetchTools = async () => {
  try {
    const res = await axios.get('http://192.168.2.13:8081/ai/tool/getAll');
    tools.value = res.data || [];
  } catch (e) {
    console.error(e);
  }
};


// 打开弹窗（新增/编辑）
const openDialog = (tool = null) => {
  if (tool) {
    dialogTitle.value = '编辑工具';
    console.log(tool);
    form.value = { ...tool };
  } else {
    dialogTitle.value = '新增工具';
    form.value = {
      id: null,
      name: '',
      api_endpoint: '',
      description: '',
      status: 1,
      param_template: '{}',
      example_input: '',
      example_output: ''
    }
  }
  dialogVisible.value = true;
};

// 保存工具（新增/编辑）
const saveTool = async () => {
  try {
    if (form.value.id) {
      await axios.put(`http://192.168.2.13:8081/ai/tool/${form.value.id}`, form.value);
    } else {
      await axios.post(`http://192.168.2.13:8081/ai/tool`, form.value);
    }
    dialogVisible.value = false;
    fetchTools();
  } catch (e) {
    console.error(e);
  }
};

// 删除工具
const deleteTool = async (id) => {
  try {
    await axios.delete(`http://192.168.2.13:8081/ai/tool/${id}`);
    fetchTools();
  } catch (e) {
    console.error(e);
  }
};

// 启用/禁用工具
const toggleStatus = async (tool) => {
  try {
    const newStatus = tool.status === 1 ? 0 : 1;
    await axios.patch(`http://192.168.2.13:8081/ai/tool/${tool.id}/status`, { status: newStatus });
    fetchTools();
  } catch (e) {
    console.error(e);
  }
};

onMounted(fetchTools);
</script>

<style scoped>
.tools-container { padding: 20px; }
.header { margin-bottom: 10px; }
</style>
